<script setup lang="ts">
import type { MdEditEvents, MdEditProps } from './index'
import { type ExposeParam, MdEditor } from 'md-editor-v3'

const props = withDefaults(defineProps<MdEditProps>(), {
  preview: true,
})
const emit = defineEmits<MdEditEvents>()

const inputValue = defineModel<string>()

const editRef = $ref<ExposeParam>()

const isDark = useDark()
</script>

<template>
  <MdEditor
    ref="editRef"
    v-model="inputValue"
    v-bind="{
      ...props,
      theme: isDark ? 'dark' : 'light',
    } as any"
    @change="(item) => emit('change', item)"
    @save="(item) => emit('save', item)"
    @input="(item) => emit('input', item)"
    @blur="(item) => emit('blur', item)"
    @focus="(item) => emit('focus', item)"
    @drop="(item) => emit('drop', item)"
  />
</template>

<style scoped></style>
